<template>
	<view class="container">
		<Masks v-if="show_mask"></Masks>
		
		<view class="main">
			<view class="main-content" v-for="(item,index) in list" :key="index" >
				
				<view class="desc" @click="toDetail()">{{item.description}}</view>
				<view class="price">
					<view class="price-detail" v-if="item.goods_list2.length>=2">¥ {{item.goods_list2[0].price}}~{{item.goods_list2[item.goods_list.length-1].price}}</view>
					<view class="price-detail" v-else>￥{{item.goods_list2[0].price}}</view>
					<view class="price-time">{{item.time_str}}前发布</view>
				</view>
				<view class="img-list">
					<view class="img-container">
						<view v-for="(_item, index) in item.goods_list[0].pics" :key="index" class="img-item">
						        <image v-if="_item.type==1" :src="_item.src" class="img" @click="readImage(_item.src)"></image>
								<video v-else :src="_item.src" class="video" :controls="false" @click="readVideo(_item.src)" :show-center-play-btn="false"></video>
								<text v-if="_item.type==2" class="cell-icon yticon icon-player player" @click="readVideo(_item.src)"></text>
						</view>
					</view>
				</view>
				
				<view class="bottom-show">
					<view class="bottom-status">{{item.status_tip}}</view>
					<view class="right-btn" @click="copyTo(item)"><text>复制接龙</text></view>
				</view>
				
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
	
			<view v-if="show_video"  style="position: fixed;top: 20%;left: 0;right: 0;z-index: 3">
				<video style="width: 100%;" muted autoplay show-mute-btn :show-fullscreen-btn="false" :src="play_video_url"></video>
				<text class="cell-icon yticon icon-jia1 close" style="top: 20rpx;width: 60rpx; height: 60rpx; font-size: 28rpx; line-height: 60rpx;" @click="closeVideo()"></text>
			</view>
		</view>
	</view>
</template>

<script>
	import Masks from '@/components/mask';
	import {mapMutations} from 'vuex';
	import Api from '@/common/api';
	export default{
		components: {
			Masks
		},
		data(){
			return {
				is_sub:0,
				is_hot:0,
				show_mask:false,
				show_video:false,
				play_video_url:'',
				page: 1,
				size: 4,
				more_data: true,
				loadingType:'more',
				list:[],				
				is_edit:0,
			}
		},
		onLoad(){
			
		},
		onShow(){
			let option  = this.$api.currentPageOption();
			this.is_edit=option.is_edit;
			this.loadList();
		},
		onReachBottom(){
			this.loadList();
		},
		onPullDownRefresh(){
			this.page=1;
			this.loadList();
		},
		methods: {
			...mapMutations(['login']),
			copyTo(item){
				item = this.saveItemOption(item);
				if(this.is_edit==1){
					
					let editDrag = uni.getStorageSync('edit_drag')||'';
					item.id = editDrag.id;
					uni.setStorage({
						key:'edit_drag',
						data:item
					})
					uni.navigateTo({
						url:'/pages/index/edit'
					})
				}else{
					item.id =0;
					uni.setStorage({
						key:'edit_drag',
						data:item
					})
					uni.switchTab({
						url:'/pages/index/create'
					})
				}

			},
			saveItemOption(item){
				return {address:item.address,cluster_id:item.cluster_id,description:item.description,end_time:item.end_time,start_time:item.start_time,goods_list:item.goods_list,id:item.id,latitude:item.latitude,longitude:item.longitude,send_msg:item.send_msg,title:item.title,user_id:item.user_id,can_copy:item.can_copy}
			},
			toDetail(){
				uni.navigateTo({
					url:'/pages/record/detail'
				})
			},
			async loadList(){
				if(!this.more_data){
					return;
				}
				let params = {
					is_hot:this.is_hot,
					is_sub:this.is_sub,
					copy:1,
					page: this.page,
					size: this.size,
				};
				let data = await Api.apiCall('get',Api.apiName.purchase_list,params);
				if(!data){
					return;
				}
				this.list = this.list.concat(data.data)
				if (data.data.length > 0 && data.data.length == this.size) {
					this.page++;
					this.loadingType = 'more';
				} else {
					this.loadingType = 'nomore';
					this.more_data = false;
				
				}
			},
			readImage(url){
				uni.previewImage({
					urls:[url]
				})
			},
			readVideo(url){
				this.show_mask=true;
				this.show_video=true;
				this.play_video_url=url;
			},
			closeVideo(){
				this.show_mask=false;
				this.show_video=false;
				this.play_video_url=''
			},
		
			
		},

	}
</script>

<style lang='scss'>
	page{
		background: #fff;
	}
	.container{
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.uni-searchbar__box {
		border: 1px solid #ccc;
	}

	.main{
		background: $back-hui;
	}
	.main-content{
		background: $back-white;
		/* height: 400rpx; */
		margin: 30rpx;
		border-radius:20rpx;
		padding-top: 10rpx;
	}
	.add_btn{
		color:$font-color-main;
		font-size: 28rpx !important;
	}

	.desc{
		color: $font-color-black;
		font-size: $font-lg;
		font-weight: $font-w-600;
		margin: 20rpx;
		/* height: 76rpx; */
		display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		
	}
	.price{
		display: flex;
		margin: 20rpx;
	}
	.price-detail{
		flex: 1;
		color: $font-color-yellow;
		font-size: $font-lg;
		font-weight: $font-w-600;
	}
	.price-time{
		color: $font-color-light;
		font-size: $font-base;
	}

	.img-list::-webkit-scrollbar {
		display: none;
	}
	.img-list {
	  width: 100%;
	  /* 设置图片容器的高度 */
	  /* height: 240rpx; */
	  overflow-x: auto; /* 横向滚动 */
	  white-space: nowrap; /* 确保图片在一行内水平排列 */
	}
	
	.img-container {
	  display: flex;
	  flex-direction: row;
	}
	
	.img-item {
	  margin:0rpx 16rpx; /* 图片之间的间距 */
	  position: relative;
	}
	.player{
		position: absolute;
		top: 70rpx;
		left: 70rpx;
	}
	.img {
	  width: 198rpx;
	  height: 198rpx;
	  border-radius: 20rpx;
	}
	.video{
		width: 198rpx;
		height: 198rpx;
		border-radius: 20rpx;
	}
	
	.bottom-show{
		display: flex;
		align-items: center;
	}
	.bottom-status{
		flex: 1;
		margin-left: 20rpx;
		font-size: $font-base;
		color:$font-color-main;
	}
	.close{
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		width: 32rpx;
		height: 32rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		color: #FFFFFF;
		transform: rotate(45deg);
		font-size: 24rpx;
		line-height: 32rpx;
		text-align: center;
	}
	.cpt-mask{
		top:0rpx !important;
		background-color: rgba(0,0,0,1) !important;  
		opacity: 1 !important;  
		z-index: 3 !important;  
	}
	.had{
		background: rgba(35,169,72,0.1);
		border:none;
		padding: 12rpx 33rpx;
	}
	.right-btn{
		margin: 20rpx;
		border: 1px solid $font-color-main;
		border-radius: 30rpx;
		padding: 2rpx 10rpx;
		font-size: $font-sm;
		color: $font-color-main;
	}
</style>
